<template>
    <div>
        <!-- :model="tableData" -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="床位编号">
                <!-- v-model="tableData" -->
                <el-input placeholder="输入床位编号进行查询"  v-model="input"/>
            </el-form-item>
            <el-form-item>
                <!-- @click="onSubmit" -->
                <el-button type="primary" @click="chaxun">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="table.ManageList" style="width: 100%">
            <el-table-column fixed prop="bednumber" label="床位编号" width="90" />
            <el-table-column prop="department" label="所属科室" width="90" />
            <el-table-column prop="nurse" label="责任护士" width="90"></el-table-column>
            <el-table-column label="配备氧气管" width="100">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">
                        {{ scope.row.oxygen === 0 ? "X" : "✔" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="配备心电机" width="100">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">
                        {{ scope.row.heart === 0 ? "X" : "✔" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="配备呼吸机" width="100">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">
                        {{ scope.row.breath === 0 ? "X" : "✔" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="icu" label="配备急救设备" width="110">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">
                        {{ scope.row.icu === 0 ? "X" : "✔" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="空调地暖" width="90">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">
                        {{ scope.row.aircondition === 0 ? "X" : "✔" }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="tv" label="电视外设" width="90">
                <template #default="scope">
                    <div class="aaaa" :class="{ active: scope.row.tv === 0 ? false : true }">{{
                        scope.row.tv === 0 ? "X"
                            : "✔"
                    }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="床位操作" width="100">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="handleClick(row.id)">删除</el-button>
                    <el-button link type="primary" size="small" @click="but(row)">编辑 </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination v-model:page-size=pageinfo.size v-model:current-page="pageinfo.page" layout="prev, pager, next"
        :total="table.total" />
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" title="床位管理" style="width: 800px">
        <!-- 弹框表格 -->
        <el-form :model="form" label-width="120px">
            <el-form-item label="床位编号">
                <el-input v-model="form.id" />
            </el-form-item>
            <el-form-item label="所属科室">
                <el-select v-model="form.department" placeholder="please select your zone">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="氧气管">
                <el-radio-group v-model="form.oxygen">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="心电机">
                <el-radio-group v-model="form.heart">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="呼吸机">
                <el-radio-group v-model="form.breath">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="急救设备">
                <el-radio-group v-model="form.icu">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="空调地暖">
                <el-radio-group v-model="form.aircondition">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电视外设">
                <el-radio-group v-model="form.tv">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="责任护士">
                <el-select v-model="form.nurse" placeholder="请选择护士">
                    <el-option v-for="item in stt" :label="item.name" :value="item.name" :key="item" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit(form)">确定修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, ref } from 'vue';
import { getSickbed, getdel, getedit, getdoctor,getsearch } from '@/API/western.api'
// import { log } from 'console';
import { ElMessageBox, ElMessage, Action } from 'element-plus'
import { log } from 'console';
const input=ref('')
const table = reactive({
    // 总数
    total: 0,
    //  列表
    ManageList: [],
    // 列表弹框用的同一接口
})

// 发请求部分
const pageinfo = reactive({
    page: 1,
    size: 10,
    bednumber:2
})
// 弹框
let form = reactive({
    id: 1,
    department: '',
    oxygen: 2,
    heart: 2,
    breath: 2,
    icu: 1,
    aircondition: 1,
    bednumber: '',
    tv: 1,
    nurse:['小','st'],
})
// 查询护士数据
let stt=reactive([])

// 编辑
const but = (row) => {
    // console.log(row);
    dialogFormVisible.value = true
    form = row

}
const getprescriptions = async () => {
    // 获取列表接口
    const res = await getSickbed(pageinfo)
    console.log(res);
    table.total = res.data.total
    // console.log(table.total);
    table.ManageList = res.data.data
    // console.log( table.ManageList);

    // 查询所有护士
    const res1 = await getdoctor()
    // console.log(res1);
    // console.log(res1.data.data);
    stt=res1.data.data
    // console.log( form.nurse,'~~');
     res1.data.data

}
// 编辑确定修改
const onSubmit = async (item) => {
    const res = await getedit(form)
    // console.log(res);
    // res.data.forEach(item => {
    //     // 三目判断
    //     item.nurse = item.nurse == 1 ? '大大' : '小小'
    // })
    const aa = res.data
    // console.log(aa);
    if (aa.code === 1) {
        // form.id = item.id
        // form.aircondition = item.aircondition
        // form.bednumber = item.bednumber
        // form.breath = item.breath
        // form.department = item.department
        // form.heart = item.heart
        // form.icu = item.icu
        // form.nurse = item.nurse
        // form.oxygen = item.oxygen
        // form.tv = item.tv

        ElMessage({
            type: 'success',
            message: aa.msg,
        })
        getprescriptions()
        dialogFormVisible.value = false
    } else {
        ElMessage({
            type: 'error',
            message: '请检查是否输入完整',
        })
    }

}

// 点击查询请求接口
const chaxun= async()=>{
    const res= await getsearch(pageinfo)
    console.log(res);
    // 重新将列表换成数据的
    table.ManageList = res.data.data
   
}

watchEffect(()=>{
    getprescriptions()
})

const handleClick = (id) => {
    ElMessageBox.alert('你确认要删除吗', '删除', {
        confirmButtonText: 'OK',
        callback: async (action: Action) => {
            // 调用删除的接口
            await getdel({ id }),
                getprescriptions()
            ElMessage('删掉啦')
        },
    })
}


const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
</script>

<style scoped>
.aaaa {
    color: pink
}

.active {
    color: aqua !important
}
</style>